import React, { memo, useEffect } from "react";
import CLThemeHeaderRcd from "@/components/theme-header-rcd";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { HotRecommendWrapper } from "./style";
import { getHotRecommendsAction } from "../../store/actionCreators";
import CLSongsCover from "@/components/songs-cover";
export default memo(function CLHotRecommend() {
  //state

  //redux hooks
  const dispatch = useDispatch();
  const { hotRecommends } = useSelector(
    (state) => ({
      hotRecommends: state.getIn(["recommend", "hotRecommends"]),
    }),
    shallowEqual
  );
  //others hooks
  useEffect(() => {
    dispatch(getHotRecommendsAction(8));
  }, [dispatch]);
  return (
    <HotRecommendWrapper>
      <CLThemeHeaderRcd
        title="热门推荐"
        keywords={["华语", "流行", "民谣", "摇滚", "电子"]}
      ></CLThemeHeaderRcd>
      <div className="recommend-list">
        {hotRecommends.map((item, index) => {
          return <CLSongsCover key={item.id} info={item} />;
        })}
      </div>
    </HotRecommendWrapper>
  );
});
